<template>
    <div class="article-simple" v-if="value">
        <a href="#"
           class="article-simple-img"
           :style="{backgroundImage: value.cover?`url(${value.cover})`:`url(/image/article/demo-p1.jpg)`}"
        ></a>
        <div class="milk-article-body">
            <h4 class="article-heading"><a href="#">{{value.title}}</a></h4>
            <div class="article-meta">
                <a href="#"><span class="iconfont  icon-time"></span><span>{{value.createTime.split('.')[0].split('T')[0]}}</span></a>
                <a href="#"><span class="iconfont  icon-mine"></span><span>{{''}}</span></a>
                <a href="#"><span class="iconfont  icon-message"></span>{{
                    value.numberOfComment ? value.numberOfComment : 0
                    }}<span></span></a>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'ArticleCardSimple',
    props: {
      value: Object
    },
    methods: {}
  }
</script>

<style src="assets/css/article.css"></style>
<style>
    /*article-simple START*/
    .article-simple {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
    }

    .article-simple-img {
        width: 90px;
        height: 90px;
        margin-right: 24px;
        background-size: cover;
    }

    .article-simple .article-heading {
        font-size: 14px;
    }

    .article-simple .article-meta a {
        margin-right: 7px;
        font-size: 12px;
    }

    .article-simple .iconfont {
        margin-right: 1px;
        font-size: 12px;
    }

    /*article-simple END*/
</style>
